<template>
    <div class="query-box">
        <condition @conditionSearch="conditionSearch"/>
        <div class="line"></div>
        <front-table-page v-if="isFrontPage" ref="frontTablePageRef"/>
        <after-table-page v-else ref="afterTablePageRef"/>
    </div>
    
</template>
<script setup>
import FrontTablePage from './front-table-page.vue'
import AfterTablePage from './after-table-page.vue'
import condition from './condition.vue'
import {ref, defineProps, onMounted} from 'vue'
const prop = defineProps({
    isFrontPage:{
        type: Boolean,
        default: true
    },
    staticCondition:{
        type:Array,
        default:() => {
            return [{key:"11111",op:"d",value:"测试"}]
        }
    }
})

const frontTablePageRef = ref()
const conditionSearch = (conditions) => {
    let arr = conditions.concat(prop.staticCondition)
    
    console.log('====================================');
    console.log(arr);
    console.log('====================================');
    frontTablePageRef.value.getTableList()
}

const tablePageRef = ref(null)
const search = () => {
    tablePageRef.value.getTableList()
}
</script>
<style scoped>
.query-box{
    padding: 24px;
    box-shadow: -4px -4px 12px rgb(255 255 255), 4px 4px 12px rgb(121 130 160 / 75%);
    margin: 24px;
    border-radius: 4px;
    
}
.line{
    height: 2px;
    width: 100%;
    background-color: #f0f2f5;
}
</style>